<template>
  <div id="KnowledgeApprovalList">
    <div class="bodyContent">
      <div id="ecList1" class="chart"></div>
      <div style="height: calc(100% - 290px)">
        <vxe-table ref="patrolPlanTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="deptSumQueryList" :loading="tloading" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
          <vxe-column type="seq" width="30" title=""></vxe-column>
          <vxe-column field="deptNa" title="科室名称"> </vxe-column>
          <vxe-column field="unConfirmed" title="未确认数量"></vxe-column>
          <vxe-column field="unReceive" title="未接收数量"> </vxe-column>
          <vxe-column field="unHandle" title="未处置数量"> </vxe-column>
          <vxe-column field="handle" title="处置数量"> </vxe-column>
          <vxe-column field="handleRate" title="处置率"> </vxe-column>
          <vxe-column field="avgHandleTime" title="处置平均时长(分钟)"> </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { onMounted, getCurrentInstance, reactive, ref } from 'vue';
let { proxy }: any = getCurrentInstance();
import * as echarts from 'echarts';

let deptSumQueryList: any = reactive([]);
let deptList: any = reactive([]);
let unConfirmedList: any = reactive([]);
let unReceiveList: any = reactive([]);
let unHandleList: any = reactive([]);
let handleList: any = reactive([]);
let tloading = ref(false); //加载状态

onMounted(() => {
  getChartdata(); // 获取质控规则表格数据
});

function getChartdata() {
  deptSumQueryList.length = 0;
  deptList.length = 0;
  unConfirmedList.length = 0;
  unReceiveList.length = 0;
  unHandleList.length = 0;
  handleList.length = 0;
  const url = '/cri/critical/report/deptSumQuery';
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      deptSumQueryList.push(...res.data.data);
      deptList.push(...res.data.deptNaList);
      unConfirmedList.push(...res.data.unConfirmedList);
      unReceiveList.push(...res.data.unReceiveList);
      unHandleList.push(...res.data.unHandleList);
      handleList.push(...res.data.handleList);
      setChartData();
    })
    .catch((err: any) => {
      console.log(err)
    });
}
function setChartData() {
  if (echarts.getInstanceByDom(document.getElementById('ecList1') as HTMLElement)) {
    echarts.dispose(document.getElementById('ecList1') as HTMLElement);
  }
  const myChart = echarts.init(document.getElementById('ecList1') as HTMLElement);

  const dept = [...new Set(deptList)];
  const unConfirmed = [...new Set(unConfirmedList)];
  const unReceive = [...new Set(unReceiveList)];
  const unHandle = [...new Set(unHandleList)];
  const handle = [...new Set(handleList)];



  myChart.setOption({
    title: {
      text: '科室汇总'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['未确认', '未接收', '未处置', '已处置']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      data: dept
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '未确认',
        type: 'line',
        data: unConfirmed
      },
      {
        name: '未接收',
        type: 'line',
        data: unReceive
      },
      {
        name: '未处置',
        type: 'line',
        data: unHandle
      },
      {
        name: '已处置',
        type: 'line',
        data: handle
      }
    ]
  });
}
</script>

<style lang="scss" scoped>
#KnowledgeApprovalList {
  height: 100%;
  .bodyContent {
    height: calc(100% - 20px);
    background-color: #fff;
    .chart {
      width: 100%;
      height: 300px;
    }
  }
}
</style>
